<template>
	<view class="u-flex-col u-col-top u-flex-1 my-body">
		<view class="my-top u-flex u-flex u-row-center u-col-center">
			<LoginButton ref="LoginButton" v-if="!vuex_hasLogin">
				<u-button
					@click="login"
					:hair-line="false"
					shape="circle"
					:ripple="true"
					:custom-style="{
						marginTop: '20rpx',
						color: 'red',
						width: '300rpx'
					}"
				>
					一键登陆
				</u-button>
			</LoginButton>

			<view class="u-flex-col u-col-center " v-else>
				<u-avatar :show-level="vuex_userInfo.vips == 1" level-bg-color="red" :src="vuex_user.avatarUrl" mode="circle" :size="120"></u-avatar>
				<text class="u-margin-top-15 nickname u-font-33">{{ vuex_user.nickname }}</text>
				<text v-if="vuex_userInfo.vips == 1" class="u-margin-top-15 vips u-font-33">会员有效期：{{ vuex_userInfo.start_time }} 至 {{ vuex_userInfo.end_time }}</text>
			</view>
		</view>

		<view class="my-bottom u-flex-1">
			<view class="u-flex u-row-between u-padding-left-30 u-padding-right-30 my-bottom-top u-padding-bottom-20">
				<u-section title="旅社订单" font-size="32" :right="false"></u-section>
				<view class="u-flex u-row-between">
					<LoginButton @click="goto_userOrder">
						<text class="u-margin-right-15 u-tips-color">全部订单</text>
						<u-icon name="arrow-right" color="#909399" size="22"></u-icon>
					</LoginButton>
				</view>
			</view>

			<view class="tabs-box u-flex u-row-around u-padding-left-30 u-padding-right-30 u-margin-top-0 u-margin-bottom-20 u-padding-bottom-20">
				<u-grid :col="5" :border="false">
					<u-grid-item v-for="(item, index) in tabs" :key="index">
						<LoginButton @click="tabs_click" :item="item" v-if="grid_item_show(item.type)">
							<view class="u-flex-col u-col-center u-row-center">
								<!-- 909399 -->
								<u-icon :name="item.icon_name" color="#FCBD71" size="55"></u-icon>
								<text class="tabs-box-label u-margin-top-10 u-content-color">{{ item.name }}</text>
							</view>
						</LoginButton>
					</u-grid-item>
				</u-grid>
			</view>

			<view class="u-flex u-row-between u-padding-left-30 u-padding-right-30 my-bottom-top u-padding-bottom-20">
				<u-section title="商品订单" font-size="32" :right="false"></u-section>
				<view class="u-flex u-row-between">
					<LoginButton @click="goto_goodsOrder">
						<text class="u-margin-right-15 u-tips-color">全部订单</text>
						<u-icon name="arrow-right" color="#909399" size="22"></u-icon>
					</LoginButton>
				</view>
			</view>

			<view class="tabs-box u-flex u-row-around u-padding-left-30 u-padding-right-30 u-margin-top-0 u-margin-bottom-20 u-padding-bottom-20">
				<u-grid :col="5" :border="false">
					<u-grid-item v-for="(item, index) in goods_tabs" :key="index">
						<LoginButton @click="tabs_click" :item="item" v-if="grid_item_show(item.type)">
							<view class="u-flex-col u-col-center u-row-center">
								<!-- 909399 -->
								<u-icon :name="item.icon_name" color="#FCBD71" size="55"></u-icon>
								<text class="tabs-box-label u-margin-top-10 u-content-color">{{ item.name }}</text>
							</view>
						</LoginButton>
					</u-grid-item>
				</u-grid>
			</view>

			<view class="u-flex u-row-between u-col-center u-padding-left-30 u-padding-right-30 my-bottom-top u-padding-bottom-20">
				<u-section title="我的服务" font-size="32" :right="false"></u-section>
				<!-- <text class="u-font-33">我的服务</text> -->
				<view class="u-flex u-row-between">
					<!-- <u-icon name="arrow-right" color="#909399" size="22"></u-icon> -->
					<!-- <LoginButton @click="goto_userOrder">
						<text class="u-margin-right-15 u-tips-color">全部订单</text>
					</LoginButton> -->
				</view>
			</view>

			<view class="tabs-box u-flex u-row-around u-padding-left-30 u-padding-right-30 u-margin-top-0 u-margin-bottom-0 u-padding-bottom-20">
				<u-grid :col="5" :border="false">
					<u-grid-item v-for="(item, index) in service" :key="index">
						<LoginButton @click="tabs_click" :item="item" v-if="grid_item_show(item.type)">
							<view class="u-flex-col u-col-center u-row-center">
								<!-- 909399 -->
								<u-icon :name="item.icon_name" color="#FCBD71" size="55"></u-icon>
								<text class="tabs-box-label u-margin-top-10 u-content-color">{{ item.name }}</text>
							</view>
						</LoginButton>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import LoginButton from '@/components/login-button/index.vue';
export default {
	// filters: {

	// },
	data() {
		return {
			goods_tabs: [
				{
					name: '待付款',
					order_status: 0,
					icon_name: 'order',
					type: 'goods_order'
				},
				{
					name: '待发货',
					order_status: 1,
					icon_name: 'twitter',
					type: 'goods_order'
				},
				{
					name: '已发货',
					order_status: 2,
					icon_name: 'gift',
					type: 'goods_order'
				},
				{
					name: '已完成',
					order_status: 3,
					icon_name: 'checkbox-mark',
					type: 'goods_order'
				},
				{
					name: '已取消',
					order_status: 4,
					icon_name: 'trash',
					type: 'goods_order'
				}
			],
			tabs: [
				{
					name: '待付款',
					order_status: 0,
					type: 'order',
					icon_name: 'order'
				},
				{
					name: '待出行',
					order_status: 1,
					icon_name: 'car',
					type: 'order'
				},
				{
					name: '已入住',
					order_status: 2,
					icon_name: 'home',
					type: 'order'
				},
				{
					name: '已完成',
					order_status: 3,
					icon_name: 'fingerprint',
					type: 'order'
				},
				{
					name: '已取消',
					order_status: 4,
					icon_name: 'trash',
					type: 'order'
				}
			],
			service: [
				{
					name: '我的收藏',
					order_status: '',
					icon_name: 'attach',
					type: 'colllect'
				},
				{
					name: '实名认证',
					order_status: '',
					icon_name: 'list',
					type: 'getUserInfo'
				},
				{
					name: '我的账户',
					order_status: '',
					icon_name: 'red-packet',
					type: 'account'
				},
				{
					name: '兑换码',
					order_status: '',
					icon_name: 'star',
					type: 'code'
				},
				{
					name: '邀请好友',
					order_status: '',
					icon_name: 'share',
					type: 'sale'
				},
				{
					name: '商家订单',
					order_status: '',
					icon_name: 'file-text',
					type: 'myOrder'
				},
				{
					name: '申请入驻',
					order_status: '',
					icon_name: 'edit-pen',
					type: 'applyAdd'
				}
			]
		};
	},
	methods: {
		// 点击 tab
		tabs_click(item) {
			// 商品订单
			if (item.type == 'goods_order') {
				this.goto_goods_order(item);
			}

			if (item.type == 'order') {
				this.goto_order(item);
			}
			if (item.type == 'colllect') {
				this.$u.route({
					url: 'pages/colllect/colllect_list',
					params: {}
				});
			}
			if (item.type == 'getUserInfo') {
				this.$u.route({
					url: 'pages/userInfo/index',
					params: {}
				});
			}
			if (item.type == 'myOrder') {
				this.$u.route({
					url: 'pages/business/myOrder',
					params: {}
				});
			}
			if (item.type == 'account') {
				this.$u.route({
					url: 'pages/account/apply',
					params: {}
				});
			}
			if (item.type == 'code') {
				this.$u.route({
					url: 'pages/code/index',
					params: {}
				});
			}
			if (item.type == 'sale') {
				this.$u.route({
					url: 'pages/sale/index',
					params: {}
				});
			}
			if (item.type == 'applyAdd') {
				this.$u.route({
					url: 'pages/business/applyAdd',
					params: {}
				});
			}
		},

		goto_goods_order(item) {
			this.$u.route({
				url: 'pages/goods_order/userOrder',
				params: {
					order_status: item.order_status
				}
			});
		},

		goto_order(item) {
			this.$u.route({
				url: 'pages/order/userOrder',
				params: {
					order_status: item.order_status
				}
			});
		},

		// 去到订单页面
		goto_userOrder() {
			this.$u.route({
				url: 'pages/order/userOrder',
			});
		},
		goto_goodsOrder() {
			this.$u.route({
				url: 'pages/goods_order/userOrder',
				params: {
					// name: 'lisa'
				}
			});
		},
		login() {
			if (this.vuex_hasLogin) {
				// console.log('已登陆');
			} else {
				this.$refs.LoginButton.button_click();
			}
		}
	},
	components: {
		LoginButton
	},
	computed: {
		...mapState({
			vuex_user: state => state.vuex_user,
			vuex_hasLogin: state => state.vuex_hasLogin,
			vuex_userInfo: state => state.vuex_userInfo
		}),

		grid_item_show() {
			return function(type) {
				let show = true;
				//|| type == 'account'
				if (type == 'myOrder' || type == 'applyAdd') {
					if (!this.vuex_hasLogin) {
						show = false;
					}
					if (this.vuex_hasLogin) {
						if (this.vuex_userInfo.business == 1) {
							show = true;
						} else {
							show = false;
						}
					}
				}
				if (type == 'sale') {
					if (!this.vuex_hasLogin) {
						show = false;
					}
					if (this.vuex_hasLogin) {
						if (this.vuex_userInfo.sale == 1) {
							show = true;
						} else {
							show = false;
						}
					}
				}
				return show;
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.tabs-box-label {
	font-size: 24rpx;
}

.my-bottom-top {
	// border-bottom: 1rpx solid $u-border-color;
}

.my-body {
	height: 100vh;
}

.my-bottom {
	background-color: #ffffff;
	width: 750rpx;
	transform: translateY(-30rpx);
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
	padding-top: 30rpx;
}

.my-top {
	width: 750rpx;
	height: 450rpx;
	background-image: linear-gradient(left, rgba(255, 153, 0, 0.6), #ff9900);
}

.nickname {
	color: #ffffff;
	font-weight: 700;
}

.vips {
	color: #ffffff;
	font-weight: 700;
	font-size: 24rpx;
}
</style>
